<template>
    <div class="screen-header">
        <div class="screen-header-logo"></div>
        <div class="screen-header-title"> {{ header }} </div>
        <div class="screen-header-time">
            <span class="screen-header-time-number">{{ newTime.year }}</span>
            <span class="screen-header-time-text">年</span>
            <span class="screen-header-time-number">{{ newTime.mouth }}</span>
            <span class="screen-header-time-text">月</span>
            <span class="screen-header-time-number">{{ newTime.day }}</span>
            <span class="screen-header-time-text header-day">日</span>
            <span class="screen-header-time-number">{{ time }}</span>
        </div>
    </div>
</template>

<script>
import comRegistration from 'common/src/api/competitionRegistration/comRegistration'
export default {
  name: "screenHeader",
  props: ["header"],
  data() {
    return {
      newTime:{
        year:'',
        mouth:'',
        day:'',
      },
      newData:'',
      headerTimer: undefined,
      year: "",
      mouth: "",
      day: "",
      time: ""
    };
  },
  methods: {
    getTime(){
       comRegistration.getCurrentDateStr().then(res => {
          if(res.code == 200){
              this.newData = res.data
              let dateArray = res.data.split(' ')[0]
              let timeArray = res.data.split(' ')[1]
              dateArray = dateArray.split('/') // 日期数组
              timeArray = timeArray.split(':') // 时间数组
              this.newTime = {
                year : dateArray[0],
                mouth :dateArray[1],
                day : dateArray[2]
              }
              // this.time = timeArray[0] + ':' + timeArray[1]
          }
       })
    },
    showNowTime() {
      let nowTime = new Date();
      // this.year = nowTime.getFullYear();
      // this.mouth = String(nowTime.getMonth()+1).padStart(2, "0");
      // this.day = String(nowTime.getDate()).padStart(2, "0");
      this.time = String(nowTime.getHours()).padStart(2, "0") + ":" + String(nowTime.getMinutes()).padStart(2, "0");
    }
  },
  created: function() {
    this.showNowTime();
    this.headerTimer = window.setInterval(this.showNowTime, 1000);
    this.getTime()
  },
  destroyed() {
    if (this.headerTimer) {
      window.clearInterval(this.headerTimer);
      this.headerTimer = undefined
    }
  }
};
</script>

<style scoped>
.screen-header {
  background: url("/static/images/screen/bg_top.png");
  height: 97px;
  width: 1920px;
}
.screen-header-logo {
  float: left;
  background: url("/static/images/screen/logo.png");
  margin: 12px 0px 0px 48px;
  width: 229px;
  height: 46px;
}

.screen-header-title {
  line-height: 80px;
  font-size: 36px;
  width: 550px;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
}
.screen-header-time {
  float: right;
  margin-top: -65px;
  margin-right: 50px;
  height: 50px;
}
.screen-header-time-number {
  font-size: 32px;
  color: #3bbffd;
  height: 50px;
  line-height: 50px;
}
.screen-header-time-text {
  font-size: 22px;
  color: #c4cce3;
  margin: 0 2px;
  height: 50px;
  line-height: 50px;
}
.header-day {
  margin-right: 20px;
}
</style>
